<template>
  <el-card
    class="dept-area work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="dept-area__header work-bench-department__card__header">
      <span class="work-bench-department__card__title dept-area__title">重点{{ CORE.MAP.REGION }}</span>
    </div>
    <div class="work-bench-department__card__body dept-area__body">
      <!-- <div class="dept-area__area-list">
        <div v-for="item in list" :key="item.areaId" class="dept-area__area-item" :class="{ active: item.areaId === active }" @click="select(item)">{{ item.areaName }}</div>
      </div> -->
      <div class="dept-area__video-item">
        <!-- <video
          autoplay
          controls
          width="100%"
          height="95%"
          :src="list && list.length ? list[0].infoList[0].httpsFmp4 : ''"
        >
          Sorry, your browser doesn't support embedded videos.
        </video> -->
        <!-- 临时替换 -->
        <!-- <img src="https://jrjpic.jrjkg.com.cn/guolufang.jpg" style="width: 100%; height: 100%" /> -->
        <video
          src="https://jrjpic.jrjkg.com.cn/guolufangjiankong.mp4"
          style="width: 100%; height: 100%; object-fit: initial"
          controls
          autoplay
          muted
          loop
        />
      </div>
      <div class="dept-area__video-item">
        <!-- <video
          autoplay
          controls
          width="100%"
          height="95%"
          :src="list && list.length ? list[1].infoList[0].httpsFmp4 : ''"
        >
          Sorry, your browser doesn't support embedded videos.
        </video> -->
        <!-- 临时替换 -->
        <!-- <img src="https://jrjpic.jrjkg.com.cn/peidianshi.jpg" style="width: 100%; height: 100%" /> -->
        <video
          src="https://jrjpic.jrjkg.com.cn/peidianshijiankong.mp4"
          style="width: 100%; height: 100%; object-fit: initial"
          controls
          autoplay
          muted
          loop
        />
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptArea',

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  data() {
    return {
      active: '',
      list: [],
      videoUrl: '',
    }
  },

  methods: {
    /**
     * @function 选择重点区域
     * @param {Object} item
     */
    select(item) {
      this.active = item.areaId
      this.videoUrl = item.infoList[0].httpsFmp4
    },

    /**
     * @function 重点区域
     * @param {String} organId -部门ID
     */
    queryDeptAreaVideo(organId) {
      if (!organId) return

      dashboardDeptApi.queryDeptAreaVideo({ organId }).then((res) => {
        this.list = res.content || []
        const first = this.list[0] || {}
        const firstInfo = (first.infoList || [])[0] || {}
        this.active = first.areaId
        this.videoUrl = firstInfo.httpsFmp4
      })
    },
  },

  mounted() {
    this.queryDeptAreaVideo(this.organId)
  },

  watch: {
    organId(newVal) {
      this.queryDeptAreaVideo(newVal)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
